<template>
  <div class="cart-page">
    <!--  
    <header>
      <div class="logo">
        <img src="/images/logo.jpg" alt="FreshMart logo">
      </div>
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/products">Products</router-link></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#contact">Contact</a></li>
          <li><router-link to="/cart" class="active">Cart</router-link></li>
        </ul>
      </nav>
    </header>
    -->

    <main class="cart-container">
      <h1>Shopping Cart</h1>
      
      <!-- Cart Header -->
      <div class="cart-header" v-if="cartItems.length > 0">
        <span>Product</span>
        <span>Price</span>
        <span>Quantity</span>
        <span>Total</span>
        <span>Action</span>
      </div>

      <!-- Cart Items -->
      <div class="cart-items">
        <div v-if="cartItems.length === 0" class="empty-cart">
          <p>Your cart is empty</p>
          <router-link to="/products">Continue Shopping</router-link>
        </div>
        
        <div v-else>
          <div v-for="item in cartItems" :key="item.id" class="cart-item">
            <span class="item-name">{{ item.name }}</span>
            <span class="item-price">€{{ item.price.toFixed(2) }}</span>
            <div class="quantity-controls">
              <button @click="decreaseQuantity(item.id)" :disabled="item.quantity <= 1">-</button>
              <span class="quantity">{{ item.quantity }}</span>
              <button @click="increaseQuantity(item.id)">+</button>
            </div>
            <span class="item-total">€{{ (item.price * item.quantity).toFixed(2) }}</span>
            <button @click="removeItem(item.id)" class="remove-btn">Remove</button>
          </div>
        </div>
      </div>

      <!-- Cart Total -->
      <div v-if="cartItems.length > 0" class="cart-total">
        Total: <span class="total-price">€{{ totalPrice.toFixed(2) }}</span>
      </div>

      <!-- Checkout Button -->
      <button 
        v-if="cartItems.length > 0" 
        @click="checkout" 
        class="checkout-btn"
      >
        Checkout
      </button>
    </main>


  </div>
</template>

<script>
export default {
  name: 'Cart',
  data() {
    return {
      cartItems: []
    }
  },
  computed: {
    totalPrice() {
      return this.cartItems.reduce((total, item) => {
        return total + (item.price * item.quantity);
      }, 0);
    }
  },
  methods: {
    loadCart() {
      const savedCart = localStorage.getItem('cart');
      if (savedCart) {
        this.cartItems = JSON.parse(savedCart);
      }
    },
    saveCart() {
      localStorage.setItem('cart', JSON.stringify(this.cartItems));
    },
    increaseQuantity(itemId) {
      const item = this.cartItems.find(item => item.id === itemId);
      if (item) {
        item.quantity++;
        this.saveCart();
      }
    },
    decreaseQuantity(itemId) {
      const item = this.cartItems.find(item => item.id === itemId);
      if (item && item.quantity > 1) {
        item.quantity--;
        this.saveCart();
      }
    },
    removeItem(itemId) {
      this.cartItems = this.cartItems.filter(item => item.id !== itemId);
      this.saveCart();
    },
    checkout() {
      if (this.cartItems.length === 0) {
        alert('Your cart is empty!');
        return;
      }
      
      const total = this.totalPrice.toFixed(2);
      const itemCount = this.cartItems.reduce((count, item) => count + item.quantity, 0);
      
      if (confirm(`Proceed to checkout?\nTotal: €${total}\nItems: ${itemCount}`)) {
        this.cartItems = [];
        this.saveCart();
        alert('Thank you for your purchase! Your order has been placed.');
      }
    }
  },
  mounted() {
    this.loadCart();
  }
}
</script>

<style scoped>
@import '../assets/style.css';

.cart-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
}

.cart-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
  font-weight: bold;
  border-radius: 4px;
}

.cart-item {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-controls button {
  width: 30px;
  height: 30px;
  border: 1px solid #333;
  background: #333;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.quantity-controls button:hover:not(:disabled) {
  background: #555;
  border-color: #555;
}

.quantity-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ccc;
  border-color: #ccc;
}

.quantity {
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}

.remove-btn {
  background-color: #333;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}

.remove-btn:hover {
  background-color: #555;
}

.cart-total {
  margin-top: 2rem;
  text-align: right;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 1rem;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.total-price {
  color: #333;
  font-size: 1.3rem;
}

.checkout-btn {
  display: block;
  width: 200px;
  margin: 2rem auto;
  padding: 1rem;
  background-color: #333;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
}

.checkout-btn:hover {
  background-color: #555;
}

.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
  color: #666;
}

.empty-cart p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.empty-cart a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border: 2px solid #333;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.empty-cart a:hover {
  background-color: #333;
  color: white;
}
</style>